import { Breadcrumb, Button, Form, Steps, Input, Result, Space, Row, Col, Flex } from "antd";
import styled from "styled-components";
import { Link } from "react-router-dom";
import { useState, useRef } from "react";
import {
  ProForm,
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { useRouter } from "@/router/hooks";
import SingleTableForm from "./modules/edit/SingleTableForm";
import SqlForm from "./modules/edit/SqlForm";
import MultipleTableForm from "./modules/edit/MultipleTableForm";


const steps = [
  {
    title: '基本信息',
  },
  {
    title: '定义API请求',
  },
  {
    title: '定义后端服务',
  },
  {
    title: '创建完成',
  },
];


const DataCatalogEdit = () => {
  const router = useRouter()
  const [layoutType, setLayoutType] = useState('1');
  const [current, setCurrent] = useState(0);
  const formRef = useRef()
  const form = Form.useForm()
  const next = () => {
    setCurrent(current + 1);
  };
  const prev = () => {
    setCurrent(current - 1);
  };
  const items = steps.map((item) => ({
    key: item.title,
    title: item.title,
  }));

  const handleDone = () => {
    Promise.all(
      formRefs.current.map((ref, index) => {
        return ref.validateFields().catch(e => {
          return Promise.reject({ ...e, index })
        })
      })
    ).catch((e) => {
      setCurrent(e.index)
    })
  }

  return (<StyleWrap>
    <div className="page-breadcrumb">
      <Breadcrumb
        items={[
          {
            title: <Link to="/catalog/dataCatalog">数据目录</Link>,
          },
          {
            title: '数据编辑',
          }
        ]}
      />
    </div>
    <ProForm
      formRef={formRef}
      layout={'horizontal'}
      grid={true}
      rowProps={{
      }}
      submitter={{
        render: (props, doms) => {
          return <Flex justify={'end'}>
            <Space><Button onClick={router.back}>取消</Button>{doms}</Space>
          </Flex>;
        },
      }}
      onFinish={async (values) => {
        console.log(values);
        message.success('提交成功');
      }}

    >
      <ProForm.Item name='id' hidden></ProForm.Item>
      <ProFormText
        name="name"
        label="服务名称"
        placeholder="请输入服务名称"
      />
      <ProFormSelect
        name="mlfl"
        colProps={{ span: 12 }}
        label="目录分类"
        placeholder="请选择目录分类"
        options={[
          {
            label: '目录分类1',
            value: '1',
          },
          {
            label: '目录分类2',
            value: '2',
          },
        ]}
      />
      <ProFormSelect
        name="zyml"
        colProps={{ span: 12 }}
        label="资源目录"
        placeholder="请选择资源目录"
        options={[
          {
            label: '目录分类1',
            value: '1',
          },
          {
            label: '目录分类2',
            value: '2',
          },
        ]}
      />
      <ProFormTextArea
        rows={4}
        name="describe"
        label="描述"
        placeholder="请输入内容"
      />

      <ProFormRadio.Group
        label="表封装"
        radioType="button"
        fieldProps={{
          value: layoutType,
          onChange: (e) => setLayoutType(e.target.value),
        }}
        options={[
          { label: '单表封装', value: '1' },
          { label: 'SQL封装', value: '2' },
          { label: '多表层级封装', value: '3' }]}
      />
      {layoutType === '1' && <SingleTableForm formRef={formRef} />}
      {layoutType === '2' && <SqlForm formRef={formRef} />}
      {layoutType === '3' && <MultipleTableForm formRef={formRef} />}
    </ProForm>


  </StyleWrap>);
}

const StyleWrap = styled.div`
  padding: 16px;
  .steps-wrapper{
    width: 70%;
  }
  .forms-wrapper{
    margin-top: 30px;
  }
 
  .ant-form-item-label{
    width: 120px;
    text-align: right;
  }
`
export default DataCatalogEdit;